<template>
  <div class="g-import">
    <g-upload
      :action="uploadUrl"
      :multiple="false"
      list-type="text"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.csv"
      :before-upload="beforeFileUpload"
      :upload-success="handleFileSuccess"
      :import-param="importParam"
    >
      <template #content>
        <el-button>导入</el-button>
      </template>
    </g-upload>
    <g-dialog
      v-model:dialog-visible="dialogVisible"
      title="导入反馈结果"
      width="800px"
      cancel-btn-text="取消"
      save-btn-text="下载结果"
      :click-sure-btn="downloadErrDataFunc"
    >
      <span class="error-count">{{ errData.length }} 条</span>
      <el-table :data="errData" border max-height="400">
        <el-table-column prop="rowIndex" label="行号" width="80" />
        <el-table-column prop="msg" label="错误信息" />
      </el-table>
    </g-dialog>
  </div>
</template>

<script lang="ts">
/**
 * @Description: 导入组件
 */
import { defineComponent, reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import importTypes from '@/utils/page/import'
import { dealColumn, exportToExcel } from '@/utils/excel'
import { omit, assign, cloneDeep } from 'lodash-es'
export default defineComponent({
  name: 'GImport',
  props: {
    // store模块 名称
    storeModelName: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const store = useStore()
    const route = useRoute()
    const dialogVisible = ref(false)
    const importTemplateCode = computed(() => store.state[props.storeModelName].importTemplateCode)
    const uploadUrl = importTypes[importTemplateCode.value]
    // console.log('uploadUrl--', uploadUrl);
    const params = computed(() => store.state[props.storeModelName].params)
    // console.log('params===', params.value);
    let importParam = omit(params.value, ['page'])?.entity
    // console.log('importParam--', importParam);

    // 导入前
    const beforeFileUpload = (file: File) => {
      const fileName = file.name
      const index1 = fileName.lastIndexOf('.')
      const index2 = fileName.length
      const suffix = fileName.substring(index1 + 1, index2) //后缀名
      if (suffix === 'xls' || suffix === 'xlsx' || suffix === 'cvs') {
        return true
      } else {
        ElMessage.warning('请上传excel文件')
        return false
      }
    }
    // 导入成功回调
    let errData: any[] = reactive([])
    const handleFileSuccess = (data: {resultList: any[];}) => {
      // console.log('data----', data);
      if (data.resultList.length === 0) {
        ElMessage.success('导入成功')
      } else {
        dialogVisible.value = true
        assign(errData, data.resultList)
        store.dispatch('data/getTableData', props.storeModelName)
        // console.log('errData---', errData);
      }
    }
    const downloadErrDataFunc = () => {
      let data = cloneDeep(errData)
      dealColumn(data, { rowIndex: '行号', msg: '错误信息' } )
      // console.log('DATA--', data);
      // console.log('errData--', errData);
      exportToExcel('上传失败的数据结果.xlsx', [data], ['error'])
    }
    return {
      importParam,
      errData,
      dialogVisible,
      uploadUrl,
      beforeFileUpload,
      handleFileSuccess,
      downloadErrDataFunc
    }
  }
})
</script>

<style lang="scss" scoped>
.g-import {
  margin-left: 20px;
}

.warning {
  color: $warning;
}

.error {
  color: $error;
}
.error-count {
  font-size: 14px;
  color: #07f;
}
</style>
